'use strict'

import React, { Component } from 'react'

import { StyleSheet, View, ScrollView, TouchableOpacity, Text, Platform, Image, ListView, Alert } from 'react-native'

import BasePage from '../common/BasePage'
import Constants from '../../common/Constants'
import SizeUtils from '../../common/SizeUtils'
import TImage from '../../components/TImage'
import Config from '../../config'
import ToastUtils from '../../common/ToastUtils'
import NoticeIcon from '../user/NoticeIcon'
import CommonViewPagerMultiShow from '../common/CommonViewPagerMultiShow'
import CommonAvatarView from '../common/CommonAvatarView'
import CommonStyles from '../../common/CommonStyles'
import QZ_RequestQuanziListAction from '../../actions/quanzi/QZ_RequestQuanziListAction'
import QZ_MineAction from '../../actions/quanzi/QZ_MineAction'
import QuanziSendShoucangQuanziAction from '../../actions/quanzi/QuanziSendShoucangQuanziAction1'
import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction';
import QZ_ApplyView from './QZ_ApplyView';
import QZ_ManagerView from './QZ_ManagerView';

export default class QZ_FindOfMine extends BasePage {
  componentWillUpdate(nextProps, nextState) {
    if (nextState.isResponeUpdate == true) {
      nextState.isResponeUpdate = false
      if (nextState.isChage) {
        nextState.isChage = false
        ToastUtils.show(nextState.tdata.is_favorited === 1 ? '成功退出圈子' : '成功加入圈子')
        this._requestData()
      }
    }
  }
  componentDidMount() {
  	this._requestData();
  }
  _dealEnterPage() {
    this._requestData();
  }
  _requestData() {
  	new QZ_MineAction().call(this);
  }
  render() {
    return (
    	<View style={{paddingTop:Config.paddingTop,
    		width:SizeUtils.getWindowSize().width,
    		height:SizeUtils.getWindowSize().height}}>
    		<ScrollView style={{ flex: 1 }} ref={ref => (this._scrollView = ref)}>
    			{this._renderHeader('我创建的圈子', 'creat',)}
          <View
            style={{
              width: SizeUtils.getWindowSize().width
            }}
          >
           {this._renderHotView(this.state.qunData&&this.state.qunData.my_create||[],true)} 
          </View>
    			{this._renderHeader('我管理的圈子', 'manag')}
          <View
            style={{
              width: SizeUtils.getWindowSize().width
            }}
          >
           {this._renderHotView(this.state.qunData&&this.state.qunData.my_manage||[],false)} 
          </View>
          {this._renderHeader('我收藏的圈子', 'shoucang')}
          <View
            style={{
              width: SizeUtils.getWindowSize().width
            }}
          >
           {this._renderHotView(this.state.qunData&&this.state.qunData.my_favor||[],false)} 
          </View>
    		</ScrollView>
    		{this._renderNavigationBar()}
        <QZ_ApplyView ref={ref => (this._applyView = ref)} />
        <QZ_ManagerView doRefresh={this._doRefresh.bind(this)} ref={ref => (this._managerView = ref)} />
    	</View>
   	)
  }
  _doRefresh(){
    this._requestData();
  }
  _renderHeader(title, key) {
    return (
      <View
        style={{
          flexDirection: 'row',
          paddingLeft: SizeUtils.translateDesignWidthToCode(30),
          paddingRight: SizeUtils.translateDesignWidthToCode(20),
          backgroundColor: '#fff',
          width: SizeUtils.getWindowSize().width,
          paddingBottom: SizeUtils.translateDesignHeightToCode(22),
          justifyContent: 'space-between',
          paddingTop: SizeUtils.translateDesignHeightToCode(22),
          alignItems: 'center',
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: '#eeeeee'
        }}
      >
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <TImage source={require('../../../resource/images/home/biaotitle.png')} style={{ width: 8, height: 30 }} />
          <Text
            style={{
              fontSize: SizeUtils.translateFontSizeToCode(28),
              color: '#333333',
              marginLeft: SizeUtils.translateDesignWidthToCode(8),
              borderWidth: 0,
              backgroundColor: '#00000000',
              fontWeight: 'bold'
            }}
          >
            {title}
          </Text>
        </View>
        {
          <TouchableOpacity
            onPress={() => {
              this._onPressMore(title,key)
            }}
          >
            <Text style={{ fontSize: SizeUtils.translateFontSizeToCode(28), color: '#999999' }}>{'更多 >'}</Text>
          </TouchableOpacity>
        }
      </View>
    )
  }
  _onPressMore(title,key) {
    this.gotoPage(Config.pages.quanzi_findlist, { title: title, type: key })
  }
   _renderHotView(array,isshow) {
    if (array.length<1) {
      return(
      <View style={{width:SizeUtils.getWindowSize().width, flexDirection:"row", justifyContent:"center",
        backgroundColor:"#ffffff",alignItems:"center",
        height:SizeUtils.getWindowSize().width*0.6,
        borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: '#eeeeee'
        }}>
        <TImage source={require("../../../resource/images/common/weifabu.png")} style={{
          width:220, height:220,
        }} />
      </View>
      )
    }
    return (
      <View
        style={{
          width: SizeUtils.getWindowSize().width,
          paddingTop: SizeUtils.translateDesignHeightToCode(20),
          paddingBottom: SizeUtils.translateDesignHeightToCode(20),
          flexDirection: 'row',
          flexWrap: 'wrap'
        }}
      >
        {array.map((data, index) => {
          return this._renderHotConentView(data, index,isshow)
        })}
      </View>
    )
  }
    _renderHotConentView(data, index,isshow) {
    return (
      <TouchableOpacity
        key={'hotc' + index}
        onPress={() => {
          this._onPressItem(data)
        }}
        style={{
          overflow: 'hidden',
          width: (SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(60)) / 2,
          height: SizeUtils.translateDesignHeightToCode(isshow?230:180),
          marginTop: SizeUtils.translateDesignHeightToCode(index > 1 ? 20 : 0),
          paddingLeft: SizeUtils.translateDesignWidthToCode(10),
          paddingRight: SizeUtils.translateDesignWidthToCode(10),
          marginLeft: SizeUtils.translateDesignWidthToCode(20),
          borderWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: '#eeeeee',
          borderRadius: 2
        }}
      >
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            alignItems: 'center'
          }}
        >
          <CommonAvatarView avatarUri={this._getImageSource(data)} size={110} />
          <View
            style={{
              height: SizeUtils.translateDesignHeightToCode(110),
              marginLeft: SizeUtils.translateDesignWidthToCode(10),
              flex: 1
            }}
          >
            <Text
              numberOfLines={1}
              style={[
                CommonStyles.primaryText,
                {
                  marginTop: SizeUtils.translateDesignHeightToCode(10),
                  color: '#000',
                  fontSize: SizeUtils.translateFontSizeToCode(24)
                }
              ]}
            >
              {data.title}
            </Text>
            <Text
              numberOfLines={2}
              style={[
                CommonStyles.primaryText,
                {
                  marginTop: SizeUtils.translateDesignHeightToCode(10),
                  lineHeight: SizeUtils.translateDesignHeightToCode(25),
                  color: 'gray',
                  fontSize: SizeUtils.translateFontSizeToCode(20)
                }
              ]}
            >
              {data.desc}
            </Text>
          </View>
        </View>
        {this._BottomView(data,isshow)}
        {
          isshow?<View style={{height:SizeUtils.translateDesignHeightToCode(50),
          borderTopWidth: SizeUtils.translateDesignNumToCode(3),
          borderTopColor: '#eeeeee',
          flexDirection:'row',}}>
          <TouchableOpacity style={{flex:1,alignItems: 'center',justifyContent: 'center',
            borderRightWidth: SizeUtils.translateDesignNumToCode(3),
            borderRightColor: '#eeeeee',}} onPress={() => {
              if (data.state===0) {
                ToastUtils.show('此圈子正在审核中请耐心等待')
                return;
              }
              this._applyView&&this._applyView.open(data.board_id)}}>
            <Text style={{color:'#6699CC'}}>申请解散</Text>
          </TouchableOpacity >
          <TouchableOpacity style={{flex:1,alignItems: 'center',justifyContent: 'center',}}
            onPress={() => {
              if (data.state===0) {
                ToastUtils.show('此圈子正在审核中请耐心等待')
                return;
              }
              this._managerView&&this._managerView.open(data.board_id,data.no_check)}}>
            <Text style={{color:'#6699CC'}}>设置</Text>
          </TouchableOpacity>
          </View>:null
        }
        
      </TouchableOpacity>
    )
  }
  _BottomView = (data,isshow) => (
    <View
      style={{
        flexDirection: 'row',
        paddingLeft: SizeUtils.translateDesignWidthToCode(10),
        marginBottom: SizeUtils.translateDesignHeightToCode(14),
        alignItems: 'center'
      }}
    >
      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
        <TImage source={require('../../../resource/images/activity/persion.png')} style={{ width: 20, height: 20 }} />
        <Text style={[CommonStyles.secondaryText, { fontSize: SizeUtils.translateFontSizeToCode(24) }]}>
          {' ' + data.favoriters_num}
        </Text>
        <TImage
          source={require('../../../resource/images/home/jianyi.png')}
          style={{ marginLeft: 10, width: 25, height: 25 }}
        />
        <Text style={[CommonStyles.secondaryText, { fontSize: SizeUtils.translateFontSizeToCode(24) }]}>
          {' ' + data.post_comment_num}
        </Text>
      </View>
      {!isshow?this._renderContentItemTagPer(data.is_favorited === 1 ? true : false, data):null}
    </View>
  )
  //标签
  _renderContentItemTagPer(isjoin, data) {
    return (
      <View
        style={{
          marginLeft: SizeUtils.translateDesignWidthToCode(20),
          backgroundColor: '#fff',
          borderRadius: SizeUtils.translateDesignNumToCode(30),
          height: SizeUtils.translateDesignHeightToCode(30),
          borderColor: isjoin ? '#1ac60c' : '#ee3535',
          borderWidth: 0.5,
          marginRight: SizeUtils.translateDesignWidthToCode(10),
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <TouchableOpacity onPress={this._shoucangQuanzi.bind(this, data)}>
          <Text
            style={{
              color: isjoin ? '#1ac60c' : '#ee3535',
              fontSize: SizeUtils.translateFontSizeToCode(22),
              textAlign: 'center',
              marginLeft: SizeUtils.translateDesignWidthToCode(10),
              marginRight: SizeUtils.translateDesignWidthToCode(10)
            }}
          >
            {isjoin ? '已加入' : '加入'}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
  _shoucangQuanzi(data) {
    new CommonCheckUserTypeAction().call(
      this,
      { needLogin: true, needVerify: true },
      this._onCheckIsUserCallback.bind(this, data)
    )
  }

  _onCheckIsUserCallback(data, result) {
    if (result) {
      let msg = data.is_favorited === 1 ? '是否确定退出圈子？' : '是否确定加入圈子？'
      Alert.alert('提示', msg, [
        {
          text: '确定',
          onPress: () => {
            new QuanziSendShoucangQuanziAction().call(this, { tdata: data, board_id: data.board_id })
          }
        },
        { text: '取消', onPress: () => {} }
      ])
    }
  }
  _getImageSource(data) {
    if (data.image_url) {
      return { uri: data.image_url }
    } else if (data.image_urls && data.image_urls && data.image_urls.length > 0) {
      return { uri: data.image_urls[0] }
    } else {
      return { uri: '' }
    }
  }
  _getQuanziImageSource(data) {
    if (data.avatar_url) {
      return { uri: data.avatar_url }
    } else {
      return { uri: '' }
    }
  }
  _onPressItem(data) {
    if (data.state===0) {
      ToastUtils.show('此圈子正在审核中请耐心等待')
      return;
    }
    this.gotoPage(Config.pages.quanzi_content, data)
  }
}